<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'header.php'?>
<style type="text/css">
	.profile-users .user img {
		height: 64px;
		object-fit: cover;
	}
	.div-date-picker {
		position: relative;
	}
	#date-picker {
		width: 140px;
		padding-left: 30px;
	}
	.div-date-picker .fa-calendar{
		position: absolute;
		left: 8px;
		top: 2px;
	}
</style>
<div class="page-header">
	<h1>		
		<a class="a-back" href="<?= admin_url('data/student_sign_today') ?>">
            <i class="fa fa-reply"></i>
        </a>
		<?=$classInfo['class_name']?> <?=$date?> 考勤数据
	</h1>
</div>
<div class="col-xs-12">
	<div class="widget-box no-border">
		<div class="widget-body">
			<div class="widget-main">
				<div class="form-inline" id="data-search">
					签到时间：
					<span class="div-date-picker">
						<input type="text" id="date-picker" placeholder="点击选择签到日期" value="<?=$date?>" readonly />
						<i class="fa fa-calendar"></i>
					</span>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="col-xs-12 mt20">
	<div id="user-profile-2" class="user-profile">
		<div class="tabbable">
			<ul class="nav nav-tabs padding-18">
				<li class="active">
					<a data-toggle="tab" href="#friends">
						<i class="pink ace-icon fa fa-users bigger-120"></i>
						未签到学生（<?= $notSignCount ?>）
					</a>
				</li>
				<li class="">
					<a data-toggle="tab" href="#pictures">
						<i class="blue ace-icon fa fa-picture-o bigger-120"></i>
						已签到学生（<?= $signCount ?>）
					</a>
				</li>
			</ul>
			<div class="tab-content no-border padding-24">
				<div id="friends" class="tab-pane active">
					<div class="profile-users clearfix">
						<?php foreach($signData as $data): ?>
							<?php if($data['sign_id']) continue; ?>
							<div class="itemdiv memberdiv">
								<div class="inline pos-rel">
									<div class="user">
										<a href="javascript:;">
											<img src="<?= $data['face_image'] ? $data['face_image'] : $staticAdminUrl . 'assets/images/avatars/avatar2.png' ?>" alt="<?=$data['realname']?>">
										</a>
									</div>
									<div class="body">
										<div class="name">
											<a href="javascript:;"><?=$data['realname']?></a>
										</div>
									</div>
								</div>
							</div>
						<?php endforeach; ?>
					</div>
				</div>

				<div id="pictures" class="tab-pane">
					<div class="profile-users clearfix">
						<?php foreach($signData as $data): ?>
							<?php if(!$data['sign_id']) continue; ?>
							<div class="itemdiv memberdiv sign-data">
								<div class="inline pos-rel">
									<div class="user">
										<a href="javascript:;" data-img="<?=$data['sign_img']?>">
											<img src="<?= $data['face_image'] ? $data['face_image'] : $staticAdminUrl . 'assets/images/avatars/avatar2.png' ?>" alt="<?=$data['realname']?>">
										</a>
									</div>
									<div class="body">
										<div class="name">
											<a href="javascript:;" data-img="<?=$data['sign_img']?>"><?=$data['realname']?></a>
											<p><i class="green ace-icon fa fa-clock-o"></i> <?=date("H:i:s", strtotime($data['signTime']))?></p>
											<?php if($data['temperature']): ?>
												<?php if($data['temperature'] == '未知'): ?>
													<span class="blue">
														体温未知
													</span>
												<?php else: ?>
													<span class="<?= $data['temperature'] > '37.2' ? 'red' : 'green' ?>">
														<?= $data['temperature'] ?>℃
													</span>
												<?php endif ?>		
											<?php endif ?>	
										</div>
									</div>
								</div>
							</div>
						<?php endforeach; ?>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<?php require VIEWPATH. ADMIN_DIR. DIRECTORY_SEPARATOR. 'footer.php'?>
<script type="text/javascript">
	$(function(){
		// 查看签到图片
		$(".sign-data a").click(function(){
			$.colorbox({
				href: $(this).data("img"),
				width: "60%"
			});
		})

		// 日期选择器
		$("#date-picker").datepicker({
			autoclose: true,
			todayHighlight: true,
			endDate: "<?= date('Y-m-d') ?>"
		}).on('changeDate', function(){
			window.location.href = "?date=" + $("#date-picker").val();
		});
		// 点击日期图标触发点击日期input
		$(".fa-calendar").click(function() {
			$('#date-picker').focus();
		});
	})
</script>